<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1 {
            /*单位一般使用px*/
            /*    快捷方式：都可以用缩略语*/
            /*如果不设置宽 就相当于占用父级的100%*/
            width: 100px;
            height: 100px;
            background-color: pink;

            padding: 10px;
            /*三个属性： width style color 三个的顺序可以互换*/
            border: solid 10px red;
            /*边框呈现圆角的样式*/
            border-radius: 20px;
            /*margin: 10px;*/
            /*margin-right: 10px;*/
            margin: 5px 8px;
            /* 内减模式 默认是content-box : 盒子的变化不会影响内容区域*/
            /*box-sizing: border-box;*/
        }
    </style>
</head>
<body>
<!--    盒子模型：浏览器中可以看到

    1.content：内容区 长和宽
    2.padding：内边距 内容区距离边框
    3.border：边框

    4.margin：外边距 盒子外部距离其他元素的距离

    区块盒子： 块级元素 独占一行 并且可以设置宽高
    行内盒子： 行级元素 不独占一行 设置宽高 不生效
    可以通过display来改变元素的陈列方式 可以将块级元素变成行内元素

    行内块元素：具有块级和行级元素的特点 不独占一行 设置宽高生效

   外边距：
   margin： 分为四个方向 top bottom left right 分别加上前缀margin-
    四个方向的值可以分别设置 如果只写margin那么 四个方向相同
    四个值 可以有缺省值 缺省的部分找对边，四个方向的顺序为 上 右 下 左

   padding： 和margin同理
   border： 也有四个方向

   边框圆角：border-radius 圆角也分为4个方向 右上 顺时针
   border-top-right-radius
-->
    <div class="div1"></div>
</body>
</html>